<template>
  <div>
    <div class="title_">
      <div><h1>城市疫情数据统计</h1></div>
      <div><h2>输入城市名查看</h2></div>
      <div style="width: 150px">
        <el-input
          placeholder="请输入城市名称"
          clearable
          v-model="obj.city"
        ></el-input>
      </div>
    </div>

    <div class="cont">
      <div style="width: 400px; float: left">
        <div id="bpp" style="height: 400px; marigin-top: 100px"></div>
      </div>
      <div class="box_right" style="width: 400px; float: right">
        <div>{{ test }}</div>
        <div style="height: 50px">{{ cityName }}</div>
        <div>城区确诊人数详情</div>
        <div id="cpp" style="height: 400px"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      obj: {
        page: 1,
        pageSize: 10,
      },
      cityName: "柳州",
      test: "",
      test2: "",
    };
  },
  watch: {
    obj: {
      handler: function (newVal, oldVal) {
        var con = 0;
        var sus = 0;
        var de = 0;
        var cur = 0;
        var se = 0;
        this.page_query(this.obj).then((val) => {
          let arr = val.list.map((item) => {
            return item.area;
          });
          let arr2 = val.list.map((item) => {
            return item.confirmed;
          });
          console.log(arr, arr2, "====");
          val.list.forEach(function (item, index, arr) {
            con = con + item.confirmed;
            sus = sus + item.suspected;
            de = de + item.dead;
            cur = cur + item.cure;
            se = se + item.severe;
            console.log(item.confirmed, index, arr);
          });
          console.log(con, sus, de, cur, se);
          let city_ = val.list[0].city;
          this.cityName = city_;
          this.initEchart(city_, con, sus, de, cur, se);

          if (this.obj.city) {
            echarts.init(document.getElementById("cpp")).dispose();
            this.initEchart2(arr, arr2);
            this.test = "";
          } else {
            echarts.init(document.getElementById("cpp")).dispose();
            this.test = "暂无数据";
            // this.test2= '各城区确诊人数详情'
            this.cityName = "city";
          }
        });
      },

      deep: true,
    },
  },
  computed: {
    ...mapState("dataList", ["dataList"]),
  },
  created() {
    this.page_query({ page: 1, pageSize: 10, city: "柳州" }).then((val) => {
      var con = 0;
      var sus = 0;
      var de = 0;
      var cur = 0;
      var se = 0;

      val.list.forEach(function (item, index, arr) {
        con = con + item.confirmed;
        sus = sus + item.suspected;
        de = de + item.dead;
        cur = cur + item.cure;
        se = se + item.severe;
        console.log(item.confirmed, index, arr);
      });
      let arr = val.list.map((item) => {
        return item.area;
      });
      let arr2 = val.list.map((item) => {
        return item.confirmed;
      });
      let city_ = val.list[0].city;
      this.initEchart(city_, con, sus, de, cur, se);
      this.initEchart2(arr, arr2);
    });
  },
  methods: {
    ...mapActions("dataList", ["page_query"]),
    setName(name) {
      this.cityName = name;
    },
    initEchart(city, confirmed, suspected, dead, cure, severe) {
      // echarts.init(document.getElementById("bpp")).dispose();
      var myChart = echarts.init(document.getElementById("bpp")); //要调用dom元素，所以在mounted调用
      // console.log(myChart);
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: 0,
        },
        series: [
          {
            name: "数据详情",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: true,
            label: {
              show: "",
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: confirmed, name: "确诊" },
              { value: suspected, name: "疑似" },
              { value: dead, name: "死亡" },
              { value: cure, name: "治愈" },
              { value: severe, name: "重症" },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    initEchart2(arr, arr2) {
      // echarts.init(document.getElementById("cpp")).dispose();
      var myChart2 = echarts.init(document.getElementById("cpp"));
      var option2 = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: [
          {
            type: "category",
            data: arr,
            // axisTick: {
            //   alignWithLabel: true,
            // },
            axisLabel: {
              formatter(val) {
                return val.split("").join("\n");
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "数值",
            type: "bar",
            barWidth: "60%",
            data: arr2,
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                },
                {
                  type: "min",
                  name: "最小值",
                },
              ],
            },
          },
        ],
      };
      myChart2.setOption(option2);
    },
  },
};
</script>
<style scoped>
.cont {
  height: 500px;
  width: 900px;
  margin: 50px auto;
}
.title_ div:first-child {
  width: 300px;
  margin: 0 auto;
}
.box_right {
  position: relative;
}
.box_right div:first-child {
  position: absolute;
  left: 170px;
  top: 200px;
  font-size: 18px;
}
.box_right div:nth-child(2){
  position: absolute;
  top: -50px;
  left: 200px;
  font-size: 18px;
}

h1{
  font-size: 30px;
  font-weight: 500;
}
h2{
   font-size: 20px;
  font-weight: 500;
}
</style>